{extend name="common/base" /}

{block name="style"}
<style type="text/css">
    .cz-nav li{
        width:auto;
        border-radius: 10px;
        border: 1px solid #39B7FF;
        padding: 0.16rem 0.145rem 0.16rem 0.245rem;
        overflow: hidden;
        margin-bottom: 0.1rem;
    }


</style>
{/block}
{block name="body"}
<div class="cz-mains">
    <ul class="cz-nav">
        {foreach $list as $vo }
        <li class="js-li">
            <div class="cz-nav-div1">¥{$vo.price}</div>
            {neq name="$vo.give" value="0"}
            <div class="cz-nav-div2">充值即送 ¥{$vo.give}</div>
            {/neq}
            <input type="hidden" class="rid" value="{$vo.recharge_id}">
            <img src="__CDN__/html/img/hz-img7.png" class="cz-nav-img" style="display:none;">
        </li>
        {/foreach}
        <!--        <li class="cz-lite">
                    <div class="cz-nav-div1">¥ 10</div>
                    <div class="cz-nav-div2">充值即送 ¥ 10</div>
                    <img src="img/hz-img7.png" class="cz-nav-img"> 
                </li>          -->
    </ul>
    <input type="hidden" class="js-recharge-id" namd="rid" value="0">
    <div class="cz-zhifu">
        <p class="zhifu-ps">付款方式：</p>
        <div class="zhifu-div">
            <img src="__CDN__/html/img/hz-img8.png" class="cz-nav-zifu">
            <span class="cz-nav-span">微信支付</span>
        </div>
    </div>
    <div class="cz-button">
        <div class="div1">立即充值</div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $('.js-li').on('click', function () {
        $('.js-li').removeClass('cz-lite');
        $(this).addClass('cz-lite');
        $(this).children('.cz-nav-img').show();
        $(".js-recharge-id").val($(this).children('.rid').val());
    });

    $('.cz-button').on('click', function () {
        var rid = $(".js-recharge-id").val();

        if (rid == 0) {
            $.toast('请选择要充值的金额', "cancel");
            return;
        }
        
        $.post("{:url('wxRecharge')}", {rid: rid}, function (res) {
            if (res.code == 1) {
                location.href = res.data.url;
            } else {
                $.toast(res.msg);
            }
        }, 'json');
    });
</script>
{/block}